<template lang="html">
  <div>
    <mu-appbar title="登录">
      <mu-icon-menu icon="more_vert" slot="right">
        <mu-menu-item title="菜单 1"/>
        <mu-menu-item title="菜单 2"/>
        <mu-menu-item title="菜单 3"/>
        <mu-menu-item title="菜单 4"/>
        <mu-menu-item title="菜单 5"/>
      </mu-icon-menu>
    </mu-appbar>
    <form>
      <mu-text-field v-model="form.username" label="用户名" errorText="" labelFloat @input=""/><br/>
      <mu-text-field v-model="form.password" type="password" label="密码" errorText="出错！出错！" labelFloat @input=""/><br/>
      <div class="btn-container">
        <mu-raised-button @click="login" label="登录" backgroundColor="#a4c639"/>
      </div>
    </form>
  </div>
</template>

<script>

  import wdApi from './libs/wdApi'

  export default {
    data () {
      return {
        form: {
          username: '',
          password: ''
        }
      }
    },
    methods: {
      login () {
        wdApi.wilddog.auth().signInWithEmailAndPassword(this.username, this.password)
        .then(res => {
          console.log(res)
        })
        .catch(e => {
          console.log(e)
        })
      }
    },
    created () {

    }
  }

</script>

<style lang="less" scoped>
form {
  text-align: center;
  margin-top: 100px;
  .btn-container {
    margin-top: 50px;
  }
}
.appbar-search-field{
color: #FFF;
margin-bottom: 0;
&.focus-state {
  color: #FFF;
}
.mu-text-field-hint {
  color: fade(#FFF, 54%);
}
.mu-text-field-input {
  color: #FFF;
}
.mu-text-field-focus-line {
  background-color: #FFF;
}
}
</style>
